import React, { useEffect, useState } from 'react'
import { Card } from 'antd';
import {coupon, home1} from '../../../request'
import './AddDiscount.modules.css'


const { Meta } = Card;



export default (props) => {

    let [coupons, getCoupons] = useState(null)

    useEffect(()=>{
        getMsg();


    },[])

    //请求数据
    const getMsg = async() =>{
        const {data:res} = await coupon.getDisjuan()

        if(res.code === 200){

            getCoupons(res.data)
        }else{
            console.log('请求数据失败');
        }
    }

    return(
        !coupons ? '<div>加载中</div>' :
        <div className={'addDiscount'}>
            {console.log(coupons)}
            <div className={'title'}>优惠券模板</div>

            <div className={'form-con'}>
                {
                    coupons.map((item, index)=>{
                        return(
                           <div key={item.juanFa_id}>
                               <Card

                                   className={'card'}
                                   hoverable
                                   style={{ width: 200 }}
                                   cover={<img width={200} height={200} alt="example" src={'/api'+item.disJuan_img} />}
                               >
                                   <Meta title={item.disJuan_title} />
                               </Card>
                           </div>
                        )
                    })
                }

                <div className={'addForm'}>
                    +
                </div>
            </div>

        </div>
    );
};

